<template>
  <el-select
    ref="select"
    v-model="selectedOrgName"
    v-bind="attrs"
    clearable
    style="width:100%"
    @clear="onClear"
    @visible-change="onVisibleChange"
    >
    <template slot="empty">
      <el-input
        ref="searchInput"
        v-model.trim="filterText"
        clearable
        prefix-icon="el-icon-search"
        placeholder="输入名称以搜索"
        class="search"
      />
      <el-tree
        ref="tree"
        v-loading="loading"
        :data="orgs"
        :default-expanded-keys="defaultExpandedKeys"
        :props="{
          children: 'children',
          label: 'name'
        }"
        node-key="id"
        :filter-node-method="filterOrg"
        @node-click="onOrgClick"
        style="max-height: 300px;overflow: auto;"
      />
    </template>
  </el-select>
</template>


<script>
export default {
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: null,
    defaultExpand: {
      type: Boolean,
      default: false
    },
    isAdmin: {
      type: Boolean,
      default: false
    },
    level: {
      type: Number,
      default: 6
    }
  },
  data() {
    return {
      filterText: '',
      orgs: [],
      defaultExpandedKeys: [1, 215, 216, 217],
      selectedOrgName: null,

      loading: true,
      expanded: false
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    value(val) {
      this.setValue(val);
    }
  },
  beforeCreate() {
    const defaults = {
      placeholder: "请选择"
    };
    this.attrs = Object.assign({}, defaults, this.$attrs);
  },
  async mounted() {
    let orgs = await this.$http.get(this.isAdmin ? '/api/admin/listOrg' : '/api/org/listOrg');
    if (this.level < 6) {
      deleteChildrenByLevel(orgs, this.level, 0);
      function deleteChildrenByLevel(nodes, level, curLevel) {
        if (curLevel == level) {
          nodes.forEach(node => {
            node.children = [];
          });
        } else {
          nodes.forEach(node => {
             deleteChildrenByLevel(node.children, level, curLevel + 1);
          });
        }
      }
    }
    this.orgs = orgs;
    if (this.value) {
      this.setValue(this.value);
    }
    this.loading = false;

    if (this.defaultExpand) {
      setTimeout(() => {
        this.expand();
      }, 100);
    }
  },
  methods: {
    onOrgClick(org) {
      if (org.children.length == 0) {
        this.selectedOrgName = org.name;
        this.$refs.select.blur();
        this.$emit('change', org.id);
      }
    },
    filterOrg(value, orgs) {
      if (!value) return true;
      return orgs.name.indexOf(value) !== -1;
    },
    onVisibleChange(visible) {
      this.expanded = visible;
      if (visible) {
        this.$nextTick(() => {
          this.$refs.searchInput.focus();
          this.filterText = '';
        });
      }
    },
    setValue(value) {
      this.value = value;
      // 根据value参数查询名称并设置
      this.selectedOrgName = queryName(this.orgs, this.value);
      function queryName(orgs, id) {
        for (let org of orgs) {
          if (org.id == id) {
            return org.name;
          }
          let ret = queryName(org.children, id);
          if (ret) {
            return ret;
          }
        }
        return null;
      }
    },
    onClear() {
      this.clear();
      this.$emit('change', null);
    },
    clear() {
      this.value = null;
      this.filterText = '';
      this.selectedOrgName = null;
    },
    focus() {
      this.$refs.select.focus();
    },
    expand() {
      if (this.loading || this.expanded) return;
      this.$refs.select.$el.click();
    }
  }
}
</script>

<style scoped>
.search >>> .el-input__inner {
  border: none;
}
.el-tree {
  padding-left: 5px;
}
</style>